/**
 * Created by quxiangqian on 2018/6/17.
 */
import {ToolTip} from "../control/ToolTip";
export class HtmlEditor extends React.Component {
    state={
        value:"",
        error:false,
        message:""
    }

    showError=(message)=>{
        this.state.error=true;
        this.setState({error:true,message:message});
    }

    default=()=>{
        this.setState({error:false});
    }

    bold=()=>{
       document.execCommand("bold", this.htmleditor, false);
    }
    insertLink=()=>{
       document.execCommand("createLink", this.htmleditor, 'www.baidu.com');
    }
    unlink=()=>{
      document.execCommand("unlink", this.htmleditor, false);
    }

    h1=()=>{
      document.execCommand("formatBlock", this.htmleditor, "<H1>");
    }
    unhtml=()=>{
         document.execCommand("removeFormat", this.htmleditor, false);
     }
     insertImage=()=>{
        document.execCommand("enableObjectResizing", this.htmleditor,'false');
        document.execCommand("insertHTML", this.htmleditor, '<img with="200px" height="200px" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1542474452185&di=149da961878d390bdb5c4564d1dac2fb&imgtype=0&src=http%3A%2F%2Fpic15.nipic.com%2F20110618%2F7779170_134010412179_2.jpg"/>');
     }

     getSelectContent=()=>{
       let range=window.getSelection().getRangeAt(0);
       let container = document.createElement('div');
       container.appendChild(range.cloneContents());
       return container.innerHTML;
     }

     initeditor=()=>{
        $(this.htmleditor).on("click","img",(e)=>{
           e.stopPropagation();
           if(e.target){
             let selection = window.getSelection();
             let range = document.createRange();
             selection.removeAllRanges();
             range.selectNode(e.target);
             selection.addRange(range);
             let rect=$(this.scalrct);
             rect.data("target",$(e.target));
             rect.show();
             let pos=$(e.target).position();
             console.log(pos.left,pos.top);

             rect.css("top",pos.top+10);
             rect.css("left",pos.left+10);
             rect.css("width",$(e.target).outerWidth());
             rect.css("height",$(e.target).outerHeight());
           }
           console.log(e.target);
        })
      let x=0,y=0,xd=0,yd=0,start=false,cmd=0,cmds={a:1,b:2,c:3,d:4,e:5,f:6,g:7,h:8};
      let defwidth=0,defheight=0;
      $(document).mousedown((e)=>{
            e.stopPropagation();
            cmd=cmds[$(e.target).attr("class")];
            console.log("target",cmd);
            //e.preventDefault();
            //let pos=$(e.target).position();
            defwidth=$(this.scalrct).width();
            defheight=$(this.scalrct).height();
            x=e.clientX-defwidth;
            y=e.clientY-defheight;
            xd=$(this.scalrct).width();
            yd=$(this.scalrct).height();
            if(cmd===4){
               //xd=-xd;
            }
            start=true;
      })

      $(document).mousemove((e)=>{
            // if($(e.target).attr("tag")! ="1"){
            //   return;
            // }
            if(start){
              //e.stopPropagation();
              //e.preventDefault();
              //let pos=$(e.target).position();
              //console.log(e.clientX-pos.left,e.clientY-pos.top);
              //$(e.target).css("left", e.clientX);
              //$(e.target).css("top", e.clientY);
              if(cmd===8){
                yd=e.clientY-y;
                xd=e.clientX-x;
              }
              if(cmd===1){
                yd=defheight-(e.clientY-y-defheight);
                xd=defwidth-(e.clientX-x-defwidth);
              }
              if(cmd===3){
                yd=defheight-(e.clientY-y-defheight);
                xd=e.clientX-x;
              }
              if(cmd===6){
                yd=e.clientY-y;
                xd=defwidth-(e.clientX-x-defwidth);
              }
              if(cmd===7){
                yd=e.clientY-y;
              }
              if(cmd===2){
                yd=defheight-(e.clientY-y-defheight);
              }

              if(cmd===4){
                xd=defwidth-(e.clientX-x-defwidth);
              }
              if(cmd===5){
                xd=e.clientX-x;
              }

              $(this.scalrct).css("width",xd);
              $(this.scalrct).css("height",yd);
              let tag=$(this.scalrct).data("target");
              if(tag){
                tag.css("width",xd);
                tag.css("height",yd);
              }



            }

      })

      $(document).mouseup((e)=>{
            e.stopPropagation();

            //e.preventDefault();
            //let pos=$(e.target).position();
            //$(e.target).css("left", xd);
            //$(e.target).css("top", yd);
            start=false;
      })

     }
     componentDidMount(){

           if(this.htmleditor){
             this.initeditor();
           }

     }
    render(){
        let item= this.props.bind[this.props.name];

        item.showError=this.showError;
        item.default=this.default;

        if(item.value){
            this.state.value=item.value;
        }
        let style={}
        let tem=<div {...this.props} className="htmleditor" tag="1" ref="t"  name={this.props.name} >

            <div ref={(r)=>this.scalrct=r} tag="1" className="select-rect">
                  <span className="a" tag="1"></span>
                  <span className="b" tag="1"></span>
                  <span className="c" tag="1"></span>
                  <span className="d" tag="1"></span>
                  <span className="e" tag="1"></span>
                  <span className="f" tag="1"></span>
                  <span className="g" tag="1"></span>
                  <span className="h" tag="1"></span>
            </div>
            <div className="content" tag="1" ref={r=>this.htmleditor=r}  onClick={()=>{
                if(this.scalrct){
                  $(this.scalrct).hide();
                }
            }} contenteditable="true" title="段落" ></div>

        </div>
        if(this.state.error===true){
            style.borderColor="red";
            this.props.style={...this.props.style,...style};
            tem=<ToolTip text={this.state.message} css="error" pos="right"><div  {...this.props} ref="t"  name={this.props.name} >sdf</div></ToolTip>
        }
        return tem;
    }
}
